<template>
    <div>
        <div class="header-Main" style="margin-top: 10px; margin-left: 5px;"> 
            <el-input v-model="name" placeholder="输入内容" suffix-icon="el-icon-search" style="width: 500px;"></el-input>
            <el-button type="primary" style="margin: 0 20px 0 5px;" @click="handlget">查询</el-button>
            <el-button type="primary">
                <div @click="publish" style="color: aliceblue;"><span style="margin-right:10px;">发布文章</span>
                    <i class="el-icon-circle-plus-outline iconadd" style="font-size: 15px;"></i></div>
            </el-button>
        </div>    
        <div v-if="tableData">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                border style="width: 100%">
        
                <el-table-column prop="id" label="ID" width="140">
        
                </el-table-column>
        
                <el-table-column prop="title" label="标题">
                </el-table-column>
        
                <el-table-column prop="cover" label="图片" width="140">
                    <template slot-scope="scope">
                        <div class="imagecontainer">
                            <img :src="scope.row.frontImage" style="height: 100%; width: 100%;">
                        </div>
                    </template>
                </el-table-column>
        
                <el-table-column prop="descr" label="描述">
                    <template slot-scope="scope">
                        <p style="height: 130px;overflow-y: scroll;">{{ scope.row.descr}}</p>
                    </template>
                </el-table-column>

                <el-table-column prop="author" label="author">
                    <template slot-scope="scope">
                        {{scope.row.user.username}}
                    </template>
                </el-table-column>

                <el-table-column prop="isDelete" label="是否禁用" width="140">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isDelete" active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0">
                    </el-switch>
                </template>
                </el-table-column>
        
                <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-check" circle></el-button>
                    <el-button type="primary" icon="el-icon-edit"  circle @click="handlEditor(scope.row.id)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="handlDelete(scope.row.id)"></el-button>
                </template>
                </el-table-column>
        
            </el-table>
        
            <!-- <div class="pageion"> 
                <pagination :total="total" :PageSize="PageSize" :PageNum="PageNum" 
                @ChangeSize="changesize" @ChangeNum="changenum"></pagination>
            </div> -->
        </div>
        <div v-else class="nodata">
            无数据
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tableData: [],
            name:""
        }
    },
    methods:{
        publish(){
            this.$router.push("/addarticle")
        },
        async getAll(){
            const res =await this.$axios.get(`article/GetAll`)
            console.log("[[pzpxpxpzxopx]]")
            console.log(res)
            this.tableData=res
        },
        handlEditor(){
            console.log("11")
        },
        handlDelete(){
            console.log("opo")
        },
        handlget(){
            console.log('pp')
        }
    },
    created(){
        this.getAll()
    }
}
</script>

<style scoped lang="less">
.header-Main{
  margin-bottom: 10px;
}

.iconadd{
  display: inline-block;
  font-size: 5px;
  padding-left: 5px;
}

.pageion{
  display: flex;
  margin-top: 30px;
  justify-content: center;
}
::v-deep .el-table th{
    text-align: center;
}
::v-deep .el-table td, .el-table th {
    text-align: center;
}

.imagecontainer{
    height: 120px;
    width: 120px;
}
</style>